<template>
  <div class="changepwd">
    <my-header title="修改密码">
      <template #left>
        <div class="back" @click="gotoback">
          <van-icon name="revoke" size="18" color="#ff5f16" />
        </div>
      </template>
    </my-header>

    <van-form class="form" @submit="onSubmit" @failed="onFailed" ref="form">
      <van-field
        v-model="form.oldpass"
        :type="type"
        name="oldpass"
        clearable
        left-icon="warn-o"
        label="旧密码"
        placeholder="旧密码"
        :rules="[
          { required: true, message: '请填写旧密码' },
          { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
        ]"
        :right-icon="type != 'password' ? 'eye-o' : 'closed-eye'"
        @click-right-icon="changeType"
      />
      <!-- 封装组件  work  -->
      <van-field
        v-model="form.newpass"
        :type="type1"
        name="newpass"
        clearable
        left-icon="warn-o"
        label="新密码"
        placeholder="新密码"
        :rules="[
          { required: true, message: '请填写新密码' },
          { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
        ]"
        :right-icon="type1 != 'password' ? 'eye-o' : 'closed-eye'"
        @click-right-icon="changeType1"
        @blur="checknewpass"
      />
      <van-field
        v-model="form.dbnewpass"
        :type="type2"
        name="dbnewpass"
        clearable
        left-icon="warn-o"
        label="确认新密码"
        placeholder="确认新密码"
        :rules="[
          { required: true, message: '请填写确认新密码' },
          { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
          {
            validator: validator,
            message: '两次确认密码不一致',
          },
        ]"
        :right-icon="type2 != 'password' ? 'eye-o' : 'closed-eye'"
        @click-right-icon="changeType2"
      />
      <div style="margin: 16px 0">
        <van-button block type="warning" native-type="submit"
          >确认修改</van-button
        >
        <van-button class="mt20" block type="danger" native-type="reset"
          >重置</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
      type2: "password",
    };
  },
  methods: {
    gotoback() {
      this.$router.back();
    },
    onSubmit(value) {
      // ajax
      if (value.oldpass == this.userInfo.password) {
        this.$ajax
          .changepass(this.userInfo.id, {
            password: this.form.newpass,
          })
          .then((res) => {
            this.ShowSuccess("密码修改成功");
            this.changeUserInfo(null);
            this.$router.push({ name: "login" });
          });
      } else {
        this.showFailMsg("原始密码不正确");
      }
    },
    onFailed() {
      this.showFailMsg("请输入正确的密码");
    },
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    changeType2() {
      this.type2 = this.type2 == "password" ? "text" : "password";
    },
    validator(val) {
      if (this.reg.pwd.test(this.form.newpass)) {
        return val == this.form.newpass;
      }
    },
    checknewpass() {
      if (
        this.reg.pwd.test(this.form.newpass) &&
        this.reg.pwd.test(this.form.dbnewpass)
      ) {
        this.$refs.form.validate("dbnewpass");
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.changepwd {
  width: 100%;
  padding: 20px;
  padding-top: 46px;
  .mt20 {
    margin-top: 20px;
  }
}
</style>